<template>
  <div class="content">
    <RouterView />
  </div>
</template>

<script setup>
import { RouterView } from 'vue-router'
</script>

<style scoped>
.content {
  flex: 1;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.content :deep(.home-container) {
  min-width: 0;
  overflow-x: auto;
}

.content :deep(.home-container)::-webkit-scrollbar {
  height: 6px;
}

.content :deep(.home-container)::-webkit-scrollbar-track {
  background: transparent;
}

.content :deep(.home-container)::-webkit-scrollbar-thumb {
  background-color: #d2d2d7;
  border-radius: 3px;
}

.content :deep(.home-container)::-webkit-scrollbar-thumb:hover {
  background-color: #86868b;
}

@media (max-width: 768px) {
  .content {
    padding: 4px;
    min-height: unset;
    height: auto;
    overflow: visible;
    display: block;
  }

  .content :deep(.home-container) {
    height: auto;
    overflow: visible;
  }
}
</style>
